<template>
  <div class="mask" @click="handleClick">
    <div class="mask-text">全屏</div>
  </div>
  <div class="data-view" ref="container">
    <div class="screen-container" :style="{ transform: computedStyle }">
      <div class="title-box">
        <a>大数据综合分析平台</a>
      </div>
      <div class="container">
        <div class="location">
          <LeftTop />
          <LeftCenter />
          <LeftBottom />
        </div>
        <div class="center">
          <CenterTop />
          <CenterBottom />
        </div>
        <div class="location">
          <RightTop />
          <RightCenter />
          <RightBottom />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CenterBottom from "./components/CenterBottom.vue";
import CenterTop from "./components/CenterTop.vue";
import LeftBottom from "./components/LeftBottom.vue";
import LeftCenter from "./components/LeftCenter.vue";
import LeftTop from "./components/LeftTop.vue";
import RightBottom from "./components/RightBottom.vue";
import RightCenter from "./components/RightCenter.vue";
import RightTop from "./components/RightTop.vue";
const container = ref();
const computedStyle = ref("scale(1)");

// 页面加载完成设置缩放
onMounted(() => {
  computedStyle.value = `scale(${document.body.clientWidth / 1920})`;
});
// 页面大小变化设置缩放
window.addEventListener("resize", () => {
  computedStyle.value = `scale(${document.body.clientWidth / 1920})`;
});

// 初始化点击遮住全屏
const handleClick = () => container.value.requestFullscreen();
</script>
<style>
.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
}

.mask-text {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  border-radius: 20px;
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  font-size: 30px;
  z-index: 1001;
  cursor: pointer;
  color: #000;
}
</style>
